<template>
  <div class="platform-expired w-full h-full flex items-center justify-center">
    <div class="wrapper">
      <div class="tips">
        <h1>平台使用已到期</h1>
        <p>
          <el-icon><Warning color="#f59e0b" size="14" /></el-icon>
          <span class="border-yellow-100 border-b-1 leading-6 ml-1 inline-block"
            >复制下面的机器码，发给管理员获取激活码，重新激活后可以继续使用!</span
          >
        </p>
      </div>
      <div class="machine-code flex items-center pb-2 pt-4 text-sm">
        <span class="mx-3">机器码</span>
        <span class="flex-1 text-center">{{ machineCode }}</span>
        <el-button link>
          <el-icon><CopyDocument color="#1764e7" size="20" @click="handleCopy" /></el-icon>
        </el-button>
      </div>
      <div class="pt-2 pb-8 flex text-sm">
        <el-input v-model="activatedCode" placeholder="请输入激活码">
          <template #prepend>激活码</template>
        </el-input>
      </div>
      <el-button class="w-full" type="primary" :loading="loading" @click="handleActivating"> 激活 </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted } from "vue"
import { ElMessage } from "element-plus"
import moment from "moment"
import { useRouter } from "vue-router"

import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
import { getExpireDateRangeApi, getMachineCodeApi, activatePlatformApi } from "@/api/expired"
import { useUserStore } from "@/store/modules/user"

const userStore = useUserStore()
const router = useRouter()
const { clipboardRef, copiedRef } = useCopyToClipboard()
const machineCode = ref("")
const activatedCode = ref("")
const loading = ref(false)

// 复制
const handleCopy = () => {
  clipboardRef.value = machineCode.value
  if (unref(copiedRef)) {
    ElMessage.success(`已复制：${machineCode.value}`)
  }
}

// 判断平台使用期限
const checkExpiredTime = async () => {
  try {
    const res = await getExpireDateRangeApi()
    const { startDate, endDate } = res.data
    if (startDate && endDate) {
      const start = moment(startDate)
      const end = moment(endDate)
      const current = moment() // 获取当前日期
      /**
       * 1. startDate === endDate 说明用户可永久使用
       * 2. current.isBetween(start, end)  说明现在还处于使用范围
       */
      if (startDate === endDate || current.isBetween(start, end)) {
        // 日期未过期，跳去首页
        gotoHomePage()
      }
    }
  } catch (error) {
    console.info(error)
  }
}

// 跳首页
const gotoHomePage = () => {
  router.push("/")
}

// 获取机器码
const getMachine = async () => {
  const res = await getMachineCodeApi()
  const { data } = res
  machineCode.value = data || ""
}

// 激活
const handleActivating = async () => {
  if (activatedCode.value === "") {
    ElMessage.warning("请输入激活码！")
    return
  }
  try {
    loading.value = true
    // 激活
    const params = {
      passnum: activatedCode.value
    }
    const res = await activatePlatformApi(params)
    if (res.data) {
      ElMessage.success("已激活使用权限！")
      gotoHomePage()
    } else {
      ElMessage.error(res.return_message)
    }
    setTimeout(() => {
      loading.value = false
    }, 1500)
  } catch (error) {
    loading.value = false
  }
}

// 初始化
const init = async () => {
  await userStore.doRefreshToken()
  getMachine()
  checkExpiredTime()
}

onMounted(() => {
  init()
})
</script>
<style lang="scss">
.platform-expired {
  background-color: #387af6;
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    position: fixed;
  }

  &::before {
    width: 80vh;
    height: 80vh;
    right: -60vh;
    top: -60vh;
  }

  &::after {
    width: 100vh;
    height: 100vh;
    left: -63vh;
    bottom: -48vh;
  }

  .wrapper {
    padding: 40px 80px 60px;
    background-color: #fff;
    border-radius: 4px;

    .tips {
      h1 {
        text-align: center;
        font-size: 24px;
        color: #62728c;
        font-weight: bolder;
      }
      p {
        font-size: 12px;
        color: #8895aa;
      }
    }
  }
}
</style>
